<template>
	<div class="yh_content foSi14">
		<div class="dis hei40 foSi16 mar-bott30" style="border-bottom: 1px solid #d9d9d9;">
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(1)" :class="type === 1?'curr':'curr1'">
				收入数据统计
			</div>
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(2)" :class="type === 2?'curr':'curr1'">
				退费数据统计
			</div>
		</div>
		<div v-if="type === 1">
			<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px;">
				<div class="dis">
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">查询时间</div>
						<div class="dis disAl">
							<el-date-picker v-model="listQuery.start" style="width: 140px;" size="small" type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始时间" />
							<el-date-picker v-model="listQuery.end" class="mar-left10" style="width: 140px;" size="small" type="date"
                value-format="yyyy-MM-dd"
                placeholder="截止时间" />
						</div>
					</div>
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">操作类型</div>
						<el-select v-model="listQuery.statusType" style="width: 140px" size="small">
							<el-option v-for="(item,index) in stateList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">支付方式</div>
						<el-select v-model="listQuery.moneyType" style="width: 140px" size="small">
							<el-option v-for="(item,index) in moneyList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">班级名称</div>
						<el-input v-model="listQuery.name" style="width: 140px;" size="small" placeholder="班级名称" />
					</div>
					<div class="dis disAl mar-top20">
						<el-button type="primary" size="small" class="bac6b7" @click="sou()">搜索</el-button>
<!--						<el-button class="mar-right10 bac6b7" type="primary" size="small">导出报表</el-button>-->
					</div>
				</div>
			</div>
			<div class="hei20 dis disAl mar-top20">
				<span>收费金额</span>
				<span style="color: #6b7cdd;">{{ money_count }}</span>
				<span>元，总课时</span>
				<span style="color: #6b7cdd;">{{ class_hour_count }}</span>
				<span>节</span>
			</div>
			<div class="mar-top10">
				<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%">
					<div slot="empty" class="m-empty-box">
						<div class="mar" style="width: 168px;height: 180px;">
							<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100" />
						</div>
						<div class="title">暂无数据</div>
					</div>
					<el-table-column prop="order_num" label="订单号" width="180" />
					<el-table-column prop="member_name" label="会员姓名	" />
					<el-table-column prop="member_tel" label="电话	" />
					<el-table-column prop="class_name" label="班级" />
					<el-table-column prop="money_type" label="订单类型" >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1" class="dis disAl">报班</div>
              <div v-if="scope.row.status == 2" class="dis disAl">转班</div>
              <div v-if="scope.row.status == 3" class="dis disAl">续班</div>
              <div v-if="scope.row.status == 4" class="dis disAl">分课</div>
              <div v-if="scope.row.status == 5" class="dis disAl">出班</div>
            </template>
          </el-table-column>
					<el-table-column prop="status" label="支付方式" >
            <template slot-scope="scope">
              <div v-if="scope.row.money_type == 1" class="dis disAl">商户扫码</div>
              <div v-if="scope.row.money_type == 2" class="dis disAl">用户扫码</div>
              <div v-if="scope.row.money_type == 3" class="dis disAl">现金支付</div>
              <div v-if="scope.row.money_type == 4" class="dis disAl">储值卡支付</div>
              <div v-if="scope.row.money_type == 5" class="dis disAl">线下银行卡</div>
              <div v-if="scope.row.money_type == 6" class="dis disAl">线下微信</div>
              <div v-if="scope.row.money_type == 7" class="dis disAl">线下支付宝</div>
              <div v-if="scope.row.money_type == 8" class="dis disAl">线下其它</div>
            </template>
          </el-table-column>
<!--					<el-table-column prop="money" label="储值卡支付金额	" />-->
					<el-table-column prop="money" label="实收金额" />
					<el-table-column prop="class_hour" label="订单课时" />
					<el-table-column prop="createtime" label="订单时间" />
<!--					<el-table-column prop="money" label="操作者" />-->
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
					@pagination="getList" />
			</div>
		</div>
		<div v-if="type === 2">
			<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px;">
				<div class="dis">
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">查询时间</div>
						<div class="dis disAl">
							<el-date-picker v-model="listQuery1.start" style="width: 140px;" size="small" type="date"
                              value-format="yyyy-MM-dd"
								              placeholder="开始时间" />
							<el-date-picker v-model="listQuery1.end" class="mar-left10" style="width: 140px;" size="small" type="date"
                              value-format="yyyy-MM-dd"
								              placeholder="截止时间" />
						</div>
					</div>
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">退费路径</div>
						<el-select v-model="listQuery1.moneyType" style="width: 140px" size="small">
							<el-option v-for="(item,index) in moneyList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div class="mar-right10">
						<div class="foSi12 hei20" style="color: #787878;">班级名称</div>
						<el-input v-model="listQuery1.name" style="width: 140px;" size="small" placeholder="班级名称" />
					</div>
					<div class="dis disAl mar-top20">
						<el-button type="primary" class="bac6b7" size="small" @click="sou1()">搜索</el-button>
<!--						<el-button class="mar-right10 bac6b7" type="primary" size="small">导出报表</el-button>-->
					</div>
				</div>
			</div>
			<div class="hei20 dis disAl mar-top20">
				<span>退费金额</span>
				<span style="color: #6b7cdd;">{{ money_count1 }}</span>
				<span>元</span>
			</div>
			<div class="mar-top10">
				<el-table :data="tableData1" v-loading="listLoading" stripe style="width: 100%">
					<div slot="empty" class="m-empty-box">
						<div class="mar" style="width: 168px;height: 180px;">
							<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100" />
						</div>
						<div class="title">暂无数据</div>
					</div>
          <el-table-column prop="member_name" label="会员姓名	" />
          <el-table-column prop="member_tel" label="电话	" />
          <el-table-column prop="class_name" label="班级" />
          <el-table-column prop="money_type" label="操作类型" >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1" class="dis disAl">报班</div>
              <div v-if="scope.row.status == 2" class="dis disAl">转班</div>
              <div v-if="scope.row.status == 3" class="dis disAl">续班</div>
              <div v-if="scope.row.status == 4" class="dis disAl">分课</div>
              <div v-if="scope.row.status == 5" class="dis disAl">出班</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="退费路径" >
            <template slot-scope="scope">
              <div v-if="scope.row.money_type == 1" class="dis disAl">商户扫码</div>
              <div v-if="scope.row.money_type == 2" class="dis disAl">用户扫码</div>
              <div v-if="scope.row.money_type == 3" class="dis disAl">现金支付</div>
              <div v-if="scope.row.money_type == 4" class="dis disAl">储值卡支付</div>
              <div v-if="scope.row.money_type == 5" class="dis disAl">线下银行卡</div>
              <div v-if="scope.row.money_type == 6" class="dis disAl">线下微信</div>
              <div v-if="scope.row.money_type == 7" class="dis disAl">线下支付宝</div>
              <div v-if="scope.row.money_type == 8" class="dis disAl">线下其它</div>
            </template>
          </el-table-column>
          <!--					<el-table-column prop="money" label="储值卡支付金额	" />-->
          <el-table-column prop="money" label="退费金额" >
            <template slot-scope="scope">
              {{scope.row.money}}
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="操作时间" />
          <!--					<el-table-column prop="money" label="操作者" />-->
        </el-table>
				<pagination v-show="total1>0" :total="total1" :page.sync="listQuery1.page"
					:limit.sync="listQuery1.limit" @pagination="getList1" />
			</div>
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
  import {
    getClassMemberOperateList,
    getClassMemberOperateList1
  } from '@/api/class.js'
	export default {
		name: 'classPrivateData',
		components: {
			Pagination
		},
		data() {
			return {
				type: 1,
				list: null,
				total: 0,
				total1: 0,
				listLoading: false,
        money_count:0,
        class_hour_count:0,
        stateList: [{
          value: '0',
          label: '不指定'
        }, {
          value: '1',
          label: '报班'
        }, {
          value: '2',
          label: '转班'
        }, {
          value: '3',
          label: '续班'
        }, {
          value: '4',
          label: '分班'
        }], // 操作类型
        moneyList: [{
          value: '0',
          label: '不指定'
        }, {
          value: '1',
          label: '商户扫码'
        }, {
          value: '2',
          label: '用户扫码'
        }, {
          value: '3',
          label: '现金支付'
        }, {
          value: '4',
          label: '储值卡支付'
        }, {
          value: '5',
          label: '线下银行卡'
        }, {
          value: '6',
          label: '线下微信'
        }, {
          value: '7',
          label: '线下支付宝'
        }, {
          value: '8',
          label: '线下其它'
        }, {
          value: '9',
          label: '线上支付'
        }], // 支付方式
				tableData: null,
				listQuery: {
					page: 1,
					limit: 0,
          start: '',
          end: '',
          name: '',
          statusType:'0',
          moneyType:'0'
				},
				listQuery1: {
          page: 1,
          limit: 0,
          start: '',
          end: '',
          name: '',
          statusType:'0',
          moneyType:'0'
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '班级管理',
				url: '/course/classPrivateList',
				pd: true
			}, {
				name: '班课课程管理',
				url: '/course/courseTeam',
				pd: true
			}, {
				name: '班课课程表',
				url: '/course/courseSurfaceClass',
				pd: true
			}, {
				name: '班课会员管理',
				url: '/course/classMember',
				pd: true
			}, {
				name: '班课数据统计',
				url: '/course/classPrivateData',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 4
			})
			this.getList()
		},
		methods: {
      sou(){
        this.getList()
      },
      sou1(){
        this.getList1()
      },
			typeClick(index) {
				if (this.type !== index) {
					this.type = index
          if(index == 1){
            this.getList()
          }else{
            this.getList1()
          }
				}
			},
			xiangqing(id) {
				console.log(id)
				this.$router.push({
					path: '/course/privateParticulars?id=' + id
				})
			},
			edit(id) {
				console.log(id)
				this.$router.push({
					path: '/course/classPrivateEdit?id=' + id
				})
			},
			add() {
				this.$router.push({
					path: '/course/classPrivateAdd'
				})
			},
			getList() {
				this.listLoading = true
				this.total = 0
				this.tableData = []
        getClassMemberOperateList(this.listQuery).then(response => {
          const {
            data
          } = response
          console.log(data);
          this.class_hour_count = data.class_hour_count
          this.money_count = data.money_count
          this.tableData = data.data
          this.listLoading = false
        }).catch(error => {
          console.log(error)
        })
			},
			getList1() {
				this.listLoading = true
				this.total = 0
				this.tableData = []
        getClassMemberOperateList1(this.listQuery1).then(response => {
          const {
            data
          } = response
          console.log(data);
          this.money_count1 = data.money_count
          this.tableData1 = data.data
          this.listLoading = false
        }).catch(error => {
          console.log(error)
        })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

	.que {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		vertical-align: top;
	}

	.curr {
		border-bottom: 4px solid #6b7cdd;
	}

	.curr1 {
		border-bottom: 4px solid #fff;
	}

	.item-p {
		padding: 0 15px;
	}
</style>
